<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="index, follow">
    <meta name="description" content="使用 HLS.js 播放器，观看直播流媒体视频。支持多种格式流媒体播放，为您提供优质的视频观看体验。">
    <meta name="keywords" content="HLS, 播放器, 视频播放, 流媒体, HLS.js, 直播视频, 视频流">
    <meta property="og:type" content="website">
    <meta property="og:title" content="HLS.js 播放器 - 高清流媒体播放">
    <meta property="og:description" content="使用 HLS.js 播放器，观看直播流媒体视频，支持各种流媒体视频格式。">
    <meta property="og:url" content="https://loujinliang.cc/home/player.html">
    <!-- <meta property="og:image" content="https://www.yourwebsite.com/thumbnail.jpg"> -->
    <title>HLS.js 播放器 - 高清流媒体播放</title>
    <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
    <style>
        .container{
            max-width: 1200px;
            margin: 0 auto;
        }
        input{
            width: 500px;
        }
        footer{
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            .poster{
                color: #0368e5;
                &:hover{
                    color: rgb(230, 18, 166);
                }
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>HLS.js 播放器</h1>
        <p>使用 HLS.js 播放器播放直播流媒体视频，支持多种视频格式。体验高清流畅的视频播放。</p>
        <!-- 输入框和按钮 -->
        <div>
            <label for="videoUrlInput">请输入视频链接（.m3u8格式）:</label>
            <input type="text" id="videoUrlInput" placeholder="输入视频URL">
            <button onclick="loadVideo()">播放视频</button>
        </div>

        <br>

        <!-- 视频播放器 -->
        <video id="video" width="100%" controls></video>

        <p>你也可以通过在url中拼上<strong>?video=你的链接</strong>，来达到播放效果</p>

        <br>

        <footer>
            <a class="poster" target="_blank" href="https://web.aimix.pro/?user_id=5048">我正在使用AI爆款内容营销矩阵获客系统，绑定我的邀请码(5048)送你300积分，快来体验吧！</a>
        </footer>
    </div>

    <script>
        // 获取URL中的视频链接参数
        function getUrlParameter(name) {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get(name);
        }

        // 初始化播放器
        function initializePlayer(videoUrl, isAuto) {
            const videoElement = document.getElementById('video');
            if(isAuto) {
                videoElement.muted = true; // 禁音
                videoElement.autoplay = true
            }
            // 使用 HLS.js 播放器
            if (Hls.isSupported()) {
                const hls = new Hls();
                hls.loadSource(videoUrl);
                hls.attachMedia(videoElement);

                hls.on(Hls.Events.MANIFEST_PARSED, function () {
                    console.log('HLS.js manifest parsed!');
                });

                hls.on(Hls.Events.ERROR, function (event, data) {
                    console.error('HLS.js 错误:', data);
                });

            } else if (videoElement.canPlayType('application/vnd.apple.mpegurl')) {
                // 如果浏览器本身支持HLS（如Safari），直接使用 <video> 标签播放
                videoElement.src = videoUrl;
            } else {
                console.error('当前浏览器不支持HLS!')
            }
        }

        // 通过输入框加载视频
        function loadVideo() {
            const videoUrlInput = document.getElementById('videoUrlInput');
            const videoUrl = videoUrlInput.value.trim();

            if (!videoUrl) {
                alert('请输入视频URL!');
                return;
            }

            initializePlayer(videoUrl, false);
        }

        // 页面加载时，尝试从URL中获取参数并播放视频
        window.onload = function() {
            const videoUrl = getUrlParameter('video');
            if (videoUrl) {
                initializePlayer(videoUrl, true);
            }
        };
    </script>
</body>
</html>
